var CheckGroup = function () {
  var template = /* html */ `
    <div class="check-group">
      <div v-if="filterable" class="check-group-search">
        <slot name="search-input">
          <el-input style="width:100%" size="small" v-model="filterValue" placeholder="请输入过滤条件" @input="searchData">
          </el-input>
        </slot>
      </div>
      <el-checkbox :checked="checkAll" :indeterminate="halfChecked" @change="allCheckChange">全选</el-checkbox>
      <div class="check-group-content">
        <template v-for="(item,index) in showData">
          <div :key="'item'+index" :style="{width:'calc('+size+'em + 25px'}">
            <el-checkbox v-model="item.checked">
              {{item.label}}
            </el-checkbox>
            <template v-if="hasWidth&&item.width!==null">
              <el-input-number size="mini" v-model="item.width" :controls="false" :min="1" precision="0" style="width:100%"
                placeholder="请输入宽度">
              </el-input-number>
            </template>
          </div>
        </template>
      </div>
    </div>
  `;

  return {
    props: {
      data: {
        type: Array,
        required: true
      },
      size: {
        type: Number,
        required: true
      },
      filterable: {
        type: Boolean,
        default: false
      },
      hasWidth: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      checkAll: function () {
        var data = this.data;
        var obj = _.find(data, {
          checked: false
        });
        return obj === undefined;
      },

      halfChecked: function () {
        var data = this.data;
        var count = _.sumBy(data, function (obj) {
          if (obj.checked) {
            return 1;
          }
          return 0;
        });
        return count > 0 && count < data.length;
      }
    },

    data: function () {
      return {
        filterValue: '',
        showData: this.data,
        timeout: null,
        oldFilterData: []
      };
    },

    methods: {
      searchData: function (filterValue) {
        var timeout = this.timeout;
        if (timeout !== null) {
          window.clearTimeout(timeout);
        }

        var self = this;
        this.timeout = setTimeout(function () {
          if (filterValue === undefined) {
            self.toSearchData();
          } else {
            self.toSearchData({
              filterValue: filterValue
            });
          }
          self.timeout = null;
        }, 500);
      },

      toSearchData: function (data) {
        var filterValue = '',
          filterData = [];
        if (data === undefined) {
          filterValue = this.filterValue;
        } else {
          var materialTypeList = data.materialTypeList;
          if (materialTypeList !== undefined) {
            filterData = materialTypeList;
          } else {
            filterData = this.oldFilterData;
          }
          filterValue = data.filterValue;
        }
        var data = this.data;
        if (filterValue !== '' || !SysUtil.isEmpty(filterData)) {
          filterValue = filterValue.toLowerCase();
          data = _.filter(data, function (obj) {
            var label = obj.label;
            if (filterData.length > 0) {
              if (filterData.indexOf(label) === -1) {
                return false;
              }
            }
            label = label.toLowerCase();
            return label.indexOf(filterValue) !== -1;
          });
        }
        this.oldFilterData = filterData;
        this.showData = data;
      },

      allCheckChange: function (checked) {
        var data = this.data;
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          item.checked = checked;
        }
      }
    },

    template: template
  };
}();
